import { SetupContext, defineComponent, inject, onMounted, ref } from 'vue';
import { MeterGroupProps, meterGroupProps, MetergroupLabelItem } from '../meter-group.props';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
import { useDesignerRules } from './use-designer-rules';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
import '../meter-group.scss';

export default defineComponent({
    name: 'FMeterGroupDesign',
    props: meterGroupProps,
    setup(props: MeterGroupProps, context: SetupContext) {
        const elementRef = ref();
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        const designerRulesComposition = useDesignerRules(designItemContext.schema, designItemContext.parent?.schema);
        const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition);

        const datalist = ref(props.datalist);
        const max = ref(props.max);
        const orientation = ref(props.orientation);
        const labelPosition = ref(props.labelPosition);
        const labelOrientation = ref(props.labelOrientation);

        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;
        });
        context.expose(componentInstance.value);

        const percentage = (value = 0) => {
            const percentOfItem = (100 / max.value) * value;
            return percentOfItem;
        };

        function renderMeters() {
            return datalist.value.map((meter: MetergroupLabelItem, meterIndex: number) => {
                return (
                    <span class="f-metergroup-meter" data-pc-section="meter"
                        style={'background-color: ' + meter.color + ';' + (orientation.value === 'vertical' ? 'height' : 'width')
                            + ': ' + percentage(meter.value) + '%;'} ></span>
                );
            });
        }

        function renderLabels() {
            return datalist.value.map((meter: MetergroupLabelItem, meterIndex: number) => {
                return (
                    <li class="f-metergroup-label" data-pc-section="labellistitem">
                        {/* 后期可以判断切换farris-icon */}
                        <span class="f-metergroup-label-marker" style={'background-color: ' + meter.color + ';'}></span>
                        <span class="f-metergroup-label-text">{meter.label} ({meter.value}%)</span>
                    </li>
                );
            });
        }

        return () => {
            return (
                <div ref={elementRef} class='drag-container' dragref={`${designItemContext.schema.id}-container`}>
                    <div class={'f-metergroup ' + (orientation.value === 'vertical' ? 'f-metergroup-vertical' : 'f-metergroup-horizontal')} >
                        {labelPosition.value === 'start' ?
                            <ol class={'f-metergroup-labels '
                                + (labelOrientation.value === 'vertical' ? 'f-metergroup-labels-vertical' : 'f-metergroup-labels-horizontal')}>
                                {renderLabels()}
                            </ol> : ''}
                        <div class="f-metergroup-meters">
                            {renderMeters()}
                        </div>
                        {labelPosition.value === 'end' ?
                            <ol class={'f-metergroup-labels '
                                + (labelOrientation.value === 'vertical' ? 'f-metergroup-labels-vertical' : 'f-metergroup-labels-horizontal')}>
                                {renderLabels()}
                            </ol> : ''}
                    </div>
                </div>
            );
        };
    }
});
